<!--
 * @description  :人员选择
 * @descriptionDetail:人员选择
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-08-11 09:52:43
-->
<template>
  <view class="page" style="height: 100%">
    <theme-navbar
      :is-white="false" :isBack="false" backColor="#2b85e4"
      title="人员选择"
    >
      <view class="right-icon" @tap="onSure">
        确定
      </view>
    </theme-navbar>
    <view class="content">
      <view class="header">
        <view class="search">
          <u-search placeholder="请输入关键字" v-model="searchValue" @custom="search"></u-search>
        </view>
        <scroll-view style="white-space: nowrap;" :scroll-x="true">
          <view class="people-select">
            <u-tag
              :text="item.personName"
              style="margin-right: 10rpx;"
              type="info"
              shape="circle"
              :bg-color="$theme.u_type_info_dark"
              :color="$theme.uni_bg_color"
              :closeable="true"
              :show="true"
              v-for="(item,index) in caseuser"
              :key="index"
              @close="tagClose(item)"
            />
          </view>
        </scroll-view>
      </view>
      <view class="body-list">
        <!-- 上拉加载 下拉刷新 -->
        <list-view
          :top="200" :useUp="false" :load-data="loadData"
          :height="getListViewHeight()" ref="mescrollItem0"
        >
          <template slot-scope="d">
            <view class="list-item" @click="selectUndertaker(d.data)">
              <u-row gutter="16" style="margin: 5rpx 0">
                <view class="con-block">
                  {{ d.data.personName }}
                </view>
                <u-col span="12">
                  <text class="con-item" style="margin: 5rpx 0">
                    角色：{{ d.data.role == 'undertaker' ? '承办人' : '案审员' }}
                  </text>
                </u-col>
                <u-col span="6">
                  <text class="con-item">
                    检查证号：{{ d.data.inspectionCertNo }}
                  </text>
                </u-col>
                <u-col span="6">
                  <text class="con-item">
                    所属部门：{{ d.data.deptName }}
                  </text>
                </u-col>
              </u-row>
            </view>
          </template>
        </list-view>
      </view>
    </view>
  </view>
</template>

<script>
import listView from '@/components/list_view.vue';
import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js';
import caseService from '@/service/case/case.service.js';
export default {
  name: 'PersonSelection',
  components: {
    listView,
  },
  mixins: [MescrollMoreMixin,],
  props: {
    params: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      searchValue: '', // 搜索框关键字
      searchIndex: 0, // 输入框字符串索引
      caseuser: [], // 案件选择人员
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {},
    getListViewHeight() {
      return this.$u.sys().windowHeight * 0.8 - uni.upx2px(200) - 44 - this.$u.sys().statusBarHeight + 'px';
    },
    // 调用后台接口查询数据：分页参数page.size, page.num
    loadData(page) {
      let self = this;
      return new Promise((resolve) => {
        if (this.params.dataHandler) {
          this.params
            .dataHandler(this.searchValue)
            .then((res) => {
              resolve({
                data: {
                  list: res,
                },
              });
            })
            .catch((err) => {
              this.$modal.alert('查询失败:' + err);
              resolve({
                data: {
                  list: [],
                },
              });
            });
          return;
        }
        // 如果当前有caseUuid，则从已有承办人中进行选择
        if (this.params && this.params.caseUuid) {
          let persons = [];
          caseService
            .persons(this.params.caseUuid)
            .then((ps) => {
              ps.data.forEach((p) => {
                let fp = {};
                fp.leCertNo = p.leCertNo;
                fp.inspectionCertNo = p.leCertNo;
                fp.personUuid = p.personUuid;
                fp.personName = p.personName;
                fp.role = p.role;
                persons.push(fp);
              });
              resolve({
                data: {
                  list: persons,
                },
              });
            })
            .catch((err) => {
              resolve({
                data: {
                  list: [],
                },
              });
              this.$modal.alert('查询失败:' + err);
            });
        } else {
          caseService
            .choosePersons({
              page: page.num,
              limit: page.size,
              personName: this.searchValue,
            })
            .then((res) => {
              if (res.success) {
                resolve({
                  data: {
                    list: res.data,
                  },
                });
              } else {
                this.$modal.alert('查询失败' + res.msg);
                resolve({
                  data: {
                    list: [],
                  },
                });
              }
            })
            .catch((err) => {
              this.$modal.alert('查询失败(' + err + ')');
              resolve({
                data: {
                  list: [],
                },
              });
            });
        }
      });
    },
    onSure() {
      let selectedPsr = this.caseuser;
      let len = selectedPsr.length;
      if (len < this.params.min) {
        this.$modal.alert('至少选择' + this.params.min + '人');
        return false;
      }
      if (len > this.params.max) {
        this.$modal.alert('至多选择' + this.params.max + '人');
        return false;
      }
      // 用leCertNo替换inspectionCertNo存放检查证号
      selectedPsr.map((p) => (p.leCertNo = p.inspectionCertNo));
      this.$emit('choose', selectedPsr);
    },
    /**
			 * 选中用户
			 */
    selectUndertaker(psr) {
      if (psr.personUuid == undefined) {
        let exist = this.caseuser.filter((r) => r.personId === psr.personId).length > 0;
        if (exist) {
          return false;
        } else {
          this.caseuser.push(psr);
        }
      } else {
        let exist = this.caseuser.filter((r) => r.personUuid === psr.personUuid).length > 0;
        if (exist) {
          return false;
        } else {
          this.caseuser.push(psr);
        }
      }
    },
    search() {
      console.log('开始搜索');
      this.$refs['mescrollItem0'].mescroll.triggerDownScroll();
    },
    // 关闭移除tag
    tagClose(item) {
      let pos = -1;
      for (let i = 0; i < this.caseuser.length; i++) {
        if (this.caseuser[i].personUuid == item.personUuid) {
          pos = i;
        }
      }
      if (pos != -1) {
        this.caseuser.splice(pos, 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
	.header {
		position: fixed;
		top: 44px;
		height: 200rpx;
		width: 100%;
		z-index: 99;
		background-color: $uni-bg-color-grey;

		.search {
			width: 100%;
			padding: 20rpx;
			border-bottom: 2rpx solid $border-color-dark;
		}

		.people-select {
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: row;
		}

		.row-border {
			width: 100%;
			height: 2rpx;
			background-color: $uni-bg-color-hover;
		}
	}

	.theme-color {
		color: $u-type-primary;
		margin-right: 30rpx;
	}

	.right-icon {
		padding: 0 25rpx;
		font-size: 30rpx;
		color: white;
	}

	.con-item {
		color: #666;
		font-size: 14px;
	}

	.list-item {
		padding: 20rpx 30rpx;
		border-bottom: 1px solid $u-border-color;
	}

	.con-block {
		margin-bottom: 10rpx;
	}
</style>
